<template>
	<view class="w-full" style="color: #636363;">
		<view class="w-full border-b text-white p-2 box-border" style="border-color: #303030;">
			{{$t('bibi.shichang')}}
		</view>
		<view class="p-2 box-border">
			<el-input v-model="search.keyword" :placeholder="$t('bibi.qsrssgjc')">
				<template #prepend>
					<el-icon><Search /></el-icon>
				</template>
			</el-input>
			<view class="w-full p-2 box-border">
				<view class="flex justify-between items-center w-full text-white text-md p-2 pb-4 box-border">
					<view style="width: 40%;min-width: 140px;">{{$t('bibi.jiaoyidui')}}</view>
					<view style="width: 30%;">{{$t('bibi.zuixingjia')}}</view>
					<view class="text-right" style="width: 30%;">{{$t('bibi.zhangdiefu')}}</view>
				</view>
				<view style="max-height: 840px;overflow: auto;">
					<view class="table-row flex justify-between items-center w-full text-white p-2 box-border text-xs cursor-pointer"
					v-for="(item,index) in table.list" :key="index" :class="{'row-active':table.activeId==item.id}" @click="tableClick(item)">
						<view class="flex items-center gap-1 " style="width: 40%;min-width: 140px;">
							<!-- <view class="iconfont icon-shoucang text-md"></view> -->
							<image src="/static/images/bibi/BTC.png" style="width: 25px;height: 25px;"></image>
							<view class="text-sm">{{item.jyd}}</view>
						</view>
						<view class="text-white" style="width: 30%;">{{item.zxj}}</view>
						<view class="text-right text-white" style="width: 30%;">{{item.zdf}}</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { Search } from '@element-plus/icons-vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				search: {
					active:'USDT',
					keyword: ''
				},
				table:{
					activeId:'1',
					list:[
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'-10%',id:'1'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'-10%',id:'2'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'-10%',id:'3'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'-10%',id:'4'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'-10%',id:'5'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'-10%',id:'6'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'-10%',id:'7'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'-10%',id:'8'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'-10%',id:'9'},
					]
				}
			}
		},
		components:{
			Search
		},
		computed: {
			...mapState({
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		methods: {
			// 点击表格按钮
			clickBtn(name) {
				this.search.active = name
			},
			// 点击表格
			tableClick(row){
				this.table.activeId = row.id
			}

		}
	}
</script>

<style scoped lang="scss">
	.row-active{
		color: #2266F4;background-color: #242424;
	}
	.table-row:hover{
		color: #2266F4;background-color: #242424;
	}
</style>